<template>
  <div id="personalCollectionPage">
    <div class="wrapper">
      <!-- 返回按钮 -->
      <div class="back_part">
        <div class="back_btn" @click="gotoCurrentOwnedPage">
          <img src="@/assets/images/pc_black/auth/back.png" />
          <span>返回</span>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content_part">
        <div class="content_left">
          <img class="content_img" :src="productDetail.image" />
        </div>

        <div class="content_right">
          <div class="content_title">
            {{ productDetail.goods_name }}
          </div>
          <div class="uBuy" v-if="advance_buy.advance_buy_status === 1">
            <span>{{ advance_buy.advance_buy_txt }}</span>
            <span>{{ advance_buy.gold_buy_txt }}</span>
          </div>

          <div class="content_info" v-if="productDetail.icon">
            <img :src="productDetail.icon" />
            <span>{{ productDetail.authorize }}</span>
          </div>

          <div class="content_describe" v-html="productDetail.goods_desc"></div>

          <div class="content_btn" :class="{ fragBtn: $route.query.icon == 1 }">
            <button
              :class="{ sendBtn_not: cantSubmit }"
              class="sendBtn"
              :disabled="cantSubmit"
              @click="gotoTrade"
            >
              {{ btnShow }}
            </button>
            <button class="sendBtn" @click="openEntity">{{ btnEntity }}</button>
          </div>

          <div class="content_icons" v-if="$route.query.icon == 0">
            <div class="icon_box">
              <img src="@/assets/images/pc_black/center/ShangLian.png" />
              <span>该商品已上链</span>
            </div>
            <i></i>
            <div class="icon_box">
              <img src="@/assets/images/pc_black/center/JianDing.png" />
              <span>该商品已鉴定</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 转赠弹窗 -->
    <el-dialog
      :visible.sync="isShowPresentDialog"
      width="40%"
      center
      @close="closePresentDialog"
      :show-close="false"
    >
      <div class="dialog_content">
        <div class="close_btn">
          <img
            src="@/assets/images/pc_black/auth/close.png"
            @click="closePresentDialog"
          />
        </div>

        <div class="content_box">
          <div class="title_line">转赠</div>

          <div class="wallet_line">
            <span class="wallet_title">地址</span>

            <div class="wallet_input">
              <input
                type="text"
                placeholder="请输入地址"
                v-model.trim="wallet"
              />

              <img
                v-show="wallet.length > 0"
                @click="clearWallet"
                src="@/assets/images/mobile_black/login/clear.png"
              />
            </div>

            <div class="wallet_desc">
              <img src="@/assets/images/pc_black/center/tip.png" />
              <span>转赠功能为不可逆操作，请您仔细核对地址以免造成损失！</span>
            </div>
          </div>

          <div class="password_line">
            <span class="password_title">输入密码</span>

            <div class="six-input-box">
              <input
                v-for="(item, index) in inputbox"
                :key="index"
                :ref="`ref${index}`"
                class="input"
                v-model.trim="item.value"
                type="password"
                oninput="value=value.replace(/[^\d]/g,'')"
                @input="onInput(index)"
                @keyup.delete="onDelete(index)"
                maxlength="1"
              />
            </div>
          </div>

          <div class="forget_line">
            <span @click="gotoSetPassword" v-if="userInfo.is_pwd === 0"
              >未设置密码点击设置</span
            >
            <span @click="gotoResetPassword" v-else>忘记密码</span>
          </div>
        </div>

        <div class="btn_box">
          <button @click="closePresentDialog">取消</button>
          <button @click="confirmPresent">确定</button>
        </div>
      </div>
    </el-dialog>

    <!-- 出售弹窗 -->
    <el-dialog
      class="sell_dialog"
      :visible="isShowSellDialog"
      :show-close="false"
      :close-on-click-modal="false"
      center
    >
      <div class="dialog_title">
        <div class="left_box">
          <span>出售藏品</span>
        </div>

        <img
          class="right_icon"
          @click="closeSellDialog"
          src="@/assets/images/pc_black/auth/close.png"
        />
      </div>

      <div class="dialog_center">
        <div class="wd_input">
          <div class="input_box">
            <span>设置价格</span>
            <span class="price_font">¥</span>
            <input type="number" placeholder="请输入价格" v-model="price" />
            <img
              class="clear"
              v-show="price.length > 0"
              src="@/assets/images/mobile_black/login/clear.png"
              @click="clearPrice"
            />
          </div>
        </div>

        <div class="sell_box">
          <span>出售时间</span>
          <ul>
            <li
              v-for="item in sellTime"
              :key="item.id"
              :class="{ currentTime: item.time === currentSellTime }"
              @click="selectCurrentTime(item)"
            >
              {{ item.time }}
            </li>
          </ul>
        </div>

        <div class="content_input">
          <span>输入密码</span>
          <div class="six_input">
            <SixInput
              type="password"
              :initFlag="initFlag"
              @complete="complete"
              @resetInitFlag="resetInitFlag"
              @getNowInput="getNowInput"
            />
          </div>
        </div>

        <div class="bottom_btn">
          <div class="password_box">
            <span @click="gotoSetPassword">未设置密码</span>
            <i></i>
            <span @click="gotoResetPassword">忘记密码？</span>
          </div>
          <div class="btn_box">
            <el-button @click="cancelSellClick">取消</el-button>
            <el-button
              :class="{
                bGrey:
                  price.length < 1 ||
                  currentSellTime.length < 1 ||
                  sellPassword.length !== 6,
              }"
              :disabled="
                price.length < 1 ||
                  currentSellTime.length < 1 ||
                  sellPassword.length !== 6
              "
              @click="confirmSellClick"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 兑换实体卡弹窗 -->
    <EntityDialog
      :options="entityOptions"
      @confirm="confirmEntity"
      @default="defaultEntity"
      @address="addressEntity"
      @edit="addressEntity"
    />

    <!-- 收获地址弹窗 -->
    <EntityAddressDialog
      :options="entityAddressOptions"
      @close="closeEntityAddress"
      @tipShow="showEntityAddressTips"
      @tipHiden="hidenEntityAddressTips"
      @confirm="confirmEntityAddress"
    />
  </div>
</template>

<script>
import SixInput from "@/components/SixInput";
import EntityDialog from "./personalCollection/EntityDialog.vue";
import EntityAddressDialog from "./personalCollection/EntityAddressDialog.vue";
import {
  getOrderInfoApi,
  transferTokenApi,
  checkTransferUserApi,
  myPieceDetailApi,
  transforeApi,
} from "@/api";
import { iscode, isIOS } from "@/utils";
import { mapState } from "vuex";

export default {
  name: "PersonalCollectionPage",
  components: { SixInput, EntityDialog, EntityAddressDialog },
  data() {
    return {
      //兑换实体卡弹窗
      entityOptions: {
        isShow: false,
        notice: [
          "1.请在XX年XX月XX日之前兑换，超过此时间未兑换视为放弃实体卡权益；",
          "2.当您点击兑换按钮后，数字藏品暂时冻结流通；当兑换实体卡成功后，数字藏品将不再流通，仅供您欣赏；",
          "3.最终解释权为metaup。",
        ],
        list: [
          {
            id: 1,
            title: "METAUPXX  北京",
            isDefault: true,
            person: "用户A",
            area: "北京市朝阳区XX街道",
            address: "XXXX街道XX号XXXXXXX",
            tel: "025-58999999",
            phone: "13227663344",
            email: "33412454@metaup.com",
          },
          {
            id: 2,
            title: "METAUPXX  南京",
            isDefault: false,
            person: "用户B",
            area: "南京市浦口区XX街道",
            address: "XXXX街道XX号XXXXXXX",
            tel: "025-58999999",
            phone: "13227663344",
            email: "33412454@metaup.com",
          },
        ],
      },
      //兑换实体卡收获地址弹窗
      entityAddressOptions: {
        isShow: false,
        dialogTitle: "",
        myFormList: [
          {
            required: true,
            name: "收货人",
            prop: "person",
            type: "input",
            value: "",
            tips: "请填写",
            isShowTips: false,
          },
          {
            required: true,
            name: "所在地区",
            prop: "area",
            type: "input",
            value: "",
            tips: "请填写",
            isShowTips: false,
          },
          {
            required: true,
            name: "详细地址",
            prop: "address",
            type: "input",
            value: "",
            tips: "请填写",
            isShowTips: false,
          },
          {
            required: true,
            name: "手机号码",
            prop: "phone",
            type: "input",
            value: "",
            text: "number",
            maxLength: 11,
            tips: "请填写",
            isShowTips: false,
          },
          {
            required: false,
            name: "固定电话",
            prop: "tel",
            type: "input",
            value: "",
            tips: "",
            isShowTips: false,
          },
          {
            required: false,
            name: "邮箱地址",
            prop: "email",
            type: "input",
            value: "",
            tips: "请填写正确的",
            isShowTips: false,
          },
        ],
      },
      // 图标
      onLineIcon: require("@/assets/images/product/onLine.png"),
      appraisalIcon: require("@/assets/images/product/appraisal.png"),
      // 商品数据
      productDetail: {},
      // 是否显示转赠弹窗
      isShowPresentDialog: false,
      // 是否能点击转赠按钮
      cantSubmit: false,
      // 是否显示出售弹窗
      isShowSellDialog: false,
      // 是否重置sixinput
      initFlag: false,
      // 钱包地址
      wallet: "",
      // 密码（六格输入框）
      inputbox: [
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
        {
          value: "",
        },
      ],
      // 密码（合并六格输入框）
      password: "",
      // 出售密码输入框
      sellPassword: "",
      // 出售价格
      price: "",
      // 出售时间
      sellTime: [
        {
          id: 1,
          time: "1天",
        },
        {
          id: 2,
          time: "2天",
        },
        {
          id: 3,
          time: "3天",
        },
        {
          id: 4,
          time: "7天",
        },
      ],
      // 当前选择的出售时间
      currentSellTime: "",
      // 按钮文字
      btnShow: "",
      btnEntity: "兑换实体卡",
      // 购买次数权益数据
      advance_buy: {},
      isPresent: false,
    };
  },
  computed: {
    // 用户信息
    ...mapState(["userInfo"]),
  },
  methods: {
    //  ------ 异步相关方法 ------
    // 获取商品信息
    async getOrderInfo() {
      let res = await getOrderInfoApi({
        id: this.$route.query.order_id,
      });
      if (iscode(res)) {
        const resData = res.result;
        this.productDetail = res.result.goods_info;
        this.$set(
          this.advance_buy,
          "advance_buy_status",
          res.result.advance_buy.advance_buy_status
        );
        this.$set(
          this.advance_buy,
          "advance_buy_txt",
          res.result.advance_buy.advance_buy_txt
        );
        this.$set(
          this.advance_buy,
          "gold_buy_txt",
          res.result.advance_buy.gold_buy_txt
        );

        // 先判断是否已转赠、已消耗、已挂售
        if (resData.status == 3) {
          this.btnShow = "已转赠";
          this.cantSubmit = true;
        } else if (resData.status == 99) {
          this.btnShow = "已消耗";
          this.cantSubmit = true;
        } else if (resData.status == 98) {
          this.btnShow = "挂售中";
          this.cantSubmit = true;
          this.isPresent = false; // 去转赠
        } else {
          // 再判断是否是同步状态 is_sync：1则已同步，则去挂售。0则未同步，则去转赠
          if (resData.goods_info.is_sync == 1) {
            this.btnShow = "挂售";
            this.cantSubmit = false;
            this.isPresent = false; // 去挂售
          } else {
            this.btnShow = resData.transfer_info.transfer_txt;
            if (resData.transfer_info.is_transfer == 1) {
              this.cantSubmit = false;
            } else {
              this.cantSubmit = true;
            }
            this.isPresent = true; // 去转赠
          }
        }

        this.$set(
          this.productDetail,
          "image",
          res.result.show_url + res.result.goods_info.images[0]
        );
        this.$set(
          this.productDetail,
          "icon",
          res.result.show_url + res.result.goods_info.icon
        );
      }
    },
    // 获取碎片信息
    async myPieceDetail() {
      let res = await myPieceDetailApi({
        id: this.$route.query.order_id,
      });
      if (iscode(res)) {
        const resData = res.result;
        let fragInfo = JSON.parse(localStorage.getItem("fragInfo"));
        if (fragInfo) {
          this.$set(this.productDetail, "goods_name", fragInfo.name);
          this.$set(this.productDetail, "goods_desc", fragInfo.intro);
          this.$set(
            this.productDetail,
            "image",
            fragInfo.show_url + fragInfo.icon
          );
          this.$set(
            this.advance_buy,
            "advance_buy_status",
            resData.transfore.is_transfer
          );
          this.$set(
            this.advance_buy,
            "advance_buy_status",
            resData.transfore.advance_buy_txt
          );

          if (resData.botton.text) {
            this.btnShow = resData.botton.text;
            this.cantSubmit = true;
          } else {
            if (resData.transfore.is_transfer == 0) {
              this.cantSubmit = true;
            } else {
              this.cantSubmit = false;
            }
            this.btnShow = resData.transfore.transfer_txt;
          }
        }
        this.isPresent = true;
      }
    },
    // 转赠藏品
    async transferToken() {
      let res = null;
      if (this.$route.query.icon == 1) {
        res = await transforeApi({
          password: this.password,
          toaddress: this.wallet,
          id: this.$route.query.order_id,
        });
      } else {
        res = await transferTokenApi({
          password: this.password,
          toaddress: this.wallet,
          order_id: this.$route.query.order_id,
        });
      }

      if (iscode(res)) {
        this.$message({
          message: "转赠成功",
          iconClass: "mySuccessIcon",
          customClass: "mySuccess",
        });
        this.initPresentData(); // 成功后初始化输入框
        this.closePresentDialog(); // 成功后关闭弹窗
        setTimeout(() => {
          this.$router.push("/personalCurrentlyOwned");
        }, 800);
      }
    },
    // 检测转赠的钱包地址是否为本商城的用户
    async checkTransferUser() {
      let res = await checkTransferUserApi({
        toaddress: this.wallet,
      });
      if (iscode(res)) {
        this.transferToken();
      }
    },

    // ------ 功能相关方法 -----
    // 倒计时 (传入接口result 和 倒计时显示内容容器对象)
    countTime(result) {
      let startDate, endDate;
      if (isIOS() == true) {
        startDate = new Date(result.result.now_time.replace(/-/g, "/"));
        endDate = new Date(result.result.pre_start_time.replace(/-/g, "/"));
      } else {
        startDate = new Date(result.result.now_time);
        endDate = new Date(result.result.pre_start_time);
      }
      let now = startDate.getTime();
      let end = endDate.getTime();
      let leftTime = end - now;
      let day, hour, minute, second;
      this.setIntervalID = setInterval(() => {
        if (leftTime > 0) {
          day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
          hour = Math.floor((leftTime / 1000 / 60 / 60) % 24);
          minute = Math.ceil((leftTime / 1000 / 60) % 60); // 不满一分钟按一分钟算
          // second = Math.floor((leftTime / 1000) % 60);

          day = day > 9 ? day : "0" + day;
          hour = hour > 9 ? hour : "0" + hour;
          minute = minute > 9 ? minute : "0" + minute;
          minute = minute === 60 ? minute - 1 : minute; // 不显示60分钟
          // second = second > 9 ? second : "0" + second;

          this.$set(
            this.countCtx,
            "countTime",
            day + "天" + hour + "时" + minute + "分"
          );
          this.canBuy = false;
          leftTime = leftTime - 1000;
        } else {
          this.$set(this.countCtx, "countTime", "0");
          // clearInterval(this.setIntervalID);
          this.canBuy = true;
        }
      }, 1000);
    },
    // 初始化转赠表单
    initPresentData() {
      this.wallet = "";
      this.inputbox.forEach((item) => (item.value = ""));
    },
    // 打开转赠弹窗
    openPresentDialog() {
      this.isShowPresentDialog = true;
    },
    // 关闭转赠弹窗
    closePresentDialog() {
      this.isShowPresentDialog = false;
      this.initPresentData(); // 关闭弹窗后初始化表单
    },
    // 确认转赠
    confirmPresent() {
      // 六格密码每个框都不能为空
      let flag = true;
      this.inputbox.map((item) => {
        if (item.value === "") flag = false;
      });
      if (this.wallet === "" || !flag) {
        this.$message({
          message: "钱包地址或支付密码不能为空",
          iconClass: "myWarningIcon",
          customClass: "myWarning",
        });
        return;
      }
      this.password = this.inputbox.reduce((total, currentVal) => {
        return (total += currentVal.value);
      }, "");
      this.checkTransferUser();
    },
    // 六格输入框输入事件
    onInput(index) {
      // index < 5 ，如果是第6格，不触发光标移动至下一个输入框。
      if (this.inputbox[index].value && index < 5) {
        this.$refs["ref" + (index + 1)][0].focus();
      }
    },
    // 六格输入框删除事件
    onDelete(index) {
      // 如果是第1格，不触发光标移动至上一个输入框
      if (index > 0) {
        this.$refs["ref" + (index - 1)][0].focus();
      }
    },
    // 清空钱包地址输入框
    clearWallet() {
      this.wallet = "";
    },
    // 初始化出售弹窗
    initSellData() {
      this.currentSellTime = "";
      this.price = "";
    },
    // 打开出售弹窗
    openSellDialog() {
      this.isShowSellDialog = true;
    },
    // 关闭出售弹窗
    closeSellDialog() {
      this.isShowSellDialog = false;
      this.initSellData();
    },
    // 取消出售
    cancelSellClick() {
      this.closeSellDialog();
    },
    // 确认出售
    confirmSellClick() {
      this.closeSellDialog();
    },
    // 清空价格输入框
    clearPrice() {
      this.price = "";
    },
    // 获取六格输入框最终输入结果
    complete(payload) {
      this.sellPassword = payload.join("");
    },
    // 重置sixinput的initFlag（initFlag：用来判断是否初始化sixinput）
    resetInitFlag() {
      this.initFlag = false;
    },
    // 切换当前选中的出售时间
    selectCurrentTime(payload) {
      this.currentSellTime = payload.time;
    },
    // 获取当前密码
    getNowInput(payload) {
      payload.forEach((item) => {
        if (item === "") {
          this.sellPassword = "";
        }
      });
    },

    // ------ 跳转相关方法 ------
    // 返回按钮触发返回到上个界面
    goBack() {
      this.$router.go(-1);
    },
    // 跳转到当前拥有界面
    gotoCurrentOwnedPage() {
      if (this.$route.query.bought) {
        this.$router.push("/personalCurrentlyOwned");
      } else {
        this.$router.go(-1);
      }
    },
    // 跳转到指定地址
    gotoPage() {
      this.closePresentDialog();
      if (this.userInfo.is_pwd === 0) {
        this.$router.push("/setPassword");
      } else if (this.userInfo.is_pwd === 1) {
        this.$router.push("/resetPassword");
      }
    },
    // 跳转到设置密码
    gotoSetPassword() {
      this.$router.push("/setPassword");
    },
    // 跳转到修改密码
    gotoResetPassword() {
      this.$router.push("/resetPassword");
    },
    // 跳转到第三方交易平台或打开弹窗
    gotoTrade() {
      if (this.isPresent) {
        this.openPresentDialog();
      } else {
        window.open(
          "https://www.zgipmall.com/cr_mobile//#/register/0000004",
          "_blank"
        );
      }
    },

    //打开实体卡兑换
    openEntity() {
      this.entityOptions.isShow = true;
    },
    //关闭实体卡兑换
    closeEntity() {
      this.entityOptions.isShow = false;
    },
    //确认兑换实体卡
    confirmEntity() {
      this.closeEntity();
    },
    //设置默认地址
    defaultEntity(payload) {
      this.entityOptions.list.map((item, index) => {
        item.isDefault = false;
        if (payload.id == item.id) {
          item.isDefault = true;
        }
      });
    },
    //新增、编辑收获地址
    addressEntity(type, value) {
      this.closeEntity();
      if (type == "new") {
        this.entityAddressOptions.dialogTitle = "新增收货地址";
      } else {
        this.entityAddressOptions.dialogTitle = "编辑收货地址";
        this.entityAddressOptions.myFormList.map((item, index) => {
          if (item.prop == "person") {
            item.value = value.person;
          } else if (item.prop == "area") {
            item.value = value.area;
          } else if (item.prop == "address") {
            item.value = value.address;
          } else if (item.prop == "phone") {
            item.value = value.phone;
          } else if (item.prop == "tel") {
            item.value = value.tel;
          } else if (item.prop == "email") {
            item.value = value.email;
          }
        });
      }
      setTimeout(() => {
        this.entityAddressOptions.isShow = true;
      }, 300);
    },

    //关闭收货地址
    closeEntityAddress() {
      this.entityAddressOptions.isShow = false;
      this.initEmtityAddress();
      setTimeout(() => {
        this.openEntity();
      }, 300);
    },
    showEntityAddressTips(payload, type) {
      this.entityAddressOptions.myFormList.map((item, index) => {
        if (item.prop == payload.prop) {
          if (type == "reg") {
            item.tips = "请输入正确的";
          } else {
            item.tips = "请填写";
          }
          item.isShowTips = true;
        }
      });
    },
    hidenEntityAddressTips(payload) {
      this.entityAddressOptions.myFormList.map((item, index) => {
        if (item.prop == payload.prop) {
          item.isShowTips = false;
        }
      });
    },

    //收获地址弹窗初始化
    initEmtityAddress() {
      this.entityAddressOptions.myFormList.map((item, index) => {
        item.isShowTips = false;
        item.value = "";
      });
    },

    //保存收获地址
    confirmEntityAddress() {
      this.closeEntityAddress();
    },
  },
  mounted() {
    if (this.$route.query.icon == 1) {
      this.myPieceDetail();
    } else {
      this.getOrderInfo();
    }
  },
};
</script>

<style lang="less" scoped>
#personalCollectionPage {
  width: 100%;
  // -版心
  .wrapper {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden; // bfa
  }

  // -退回按钮div
  .back_part {
    width: 100%;
    padding-top: 20px;

    .back_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 104px;
      height: 30px;
      border: none;
      background: none;
      background-image: url("../../assets/images/personalCenter/btn.png");
      background-position: center center;
      background-size: 100% 100%;
      cursor: pointer;

      img {
        width: 20px;
        height: 6px;
      }

      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
        margin-left: 10px;
      }
    }
  }

  // -内容区域
  .content_part {
    display: flex;
    width: 100%;
    height: 540px;
    background: #2b2c2d;
    margin-top: 30px;
    padding: 40px 40px 0 40px;

    .content_left {
      display: flex;
      align-items: center;
      margin-top: -40px;

      .content_img {
        width: 420px;
        height: auto;
        max-height: 420px;
      }
    }

    .content_right {
      margin-left: 40px;

      .content_title {
        max-width: 500px;
        // height: 64px;
        font-size: 28px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 32px;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        margin-top: 10px;
      }

      .uBuy {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
        margin-top: 10px;
        margin-bottom: 20px;
        // transform: translateY(-10px);

        span:first-child {
          margin-bottom: 5px;
        }
      }

      .content_info {
        display: flex;
        align-items: center;
        margin-top: 20px;

        img {
          width: 23px;
          height: 23px;
        }

        span {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 12px;
          margin-left: 10px;
        }
      }

      .content_describe {
        width: 660px;
        height: 170px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #959596;
        line-height: 22px;
        overflow: auto;
        margin-top: 20px;
      }

      .content_btn {
        display: flex;
        align-items: center;
        margin-top: 30px;
        height: 39px;

        .sendBtn {
          border: none;
          background: none;
          width: 215px;
          height: 39px;
          background-image: url("../../assets/images/pc_black/home/btn_color.png");
          background-position: center center;
          background-size: 100% 100%;
          font-size: 14px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #1e2020;
          line-height: 14px;
          cursor: pointer;
        }
        .sendBtn:nth-child(2) {
          margin-left: 40px;
        }

        .sendBtn_not {
          background-image: url("../../assets/images/pc_black/home/btn_grey.png");
        }
      }
      .fragBtn {
        margin-top: 170px;
      }

      .content_icons {
        display: flex;
        margin-top: 32px;

        .icon_box {
          display: flex;

          img {
            width: 12px;
            height: 12px;
          }

          span {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #00ffb0;
            line-height: 12px;
            margin-left: 5px;
          }
        }

        .icon_box:nth-child(2) {
          span {
            margin-left: 7px;
          }
        }

        i {
          width: 1px;
          height: 12px;
          opacity: 0.3;
          border: 1px solid #ffffff;
          margin: 0 30px;
        }
      }
    }
  }

  // >> 底部部分
  .bottom_part {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 122px;
    background: #171818;
    box-shadow: 0px -1px 0px 0px #2e2f2f;

    .font_box {
      display: flex;
      flex-direction: column;

      span {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 14px;
        text-align: center;
      }

      span:nth-child(2) {
        margin-top: 15px;
      }
    }
  }

  // -转赠弹窗
  /deep/.el-dialog {
    width: 560px;
    height: 480px;
    background: #1e2020;
    border-radius: 5px;
  }

  /deep/.el-dialog__header {
    display: none;
  }

  /deep/.el-dialog__body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #1e2020;
    border-radius: 5px;
  }

  .dialog_content {
    position: relative;
    width: 100%;
    height: 100%;

    .close_btn {
      position: absolute;
      top: 23px;
      right: 20px;

      img {
        width: 12px;
        height: 12px;
        cursor: pointer;
      }
    }

    .content_box {
      display: flex;
      flex-direction: column;
      padding: 40px 30px 0 30px;

      .title_line {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 18px;
      }

      .wallet_line {
        display: flex;
        flex-direction: column;
        padding-top: 40px;

        .wallet_title {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 16px;
        }

        .wallet_input {
          position: relative;
          border-bottom: 1px solid #333333;
          margin-top: 26px;
          padding-bottom: 22px;

          input {
            width: 100%;
            background: none;
            border: none;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 16px;
            padding: 0;
          }

          ::-webkit-input-placeholder {
            /* WebKit, Blink, Edge */
            color: #666666 !important;
          }

          :-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #666666 !important;
          }

          ::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #666666 !important;
          }

          :-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: #666666 !important;
          }

          img {
            position: absolute;
            bottom: 23px;
            right: 7px;
            width: 14px;
            height: 14px;
            cursor: pointer;
          }
        }

        .wallet_desc {
          display: flex;
          margin-top: 14px;

          img {
            width: 12px;
            height: 12px;
          }

          span {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff8686;
            line-height: 12px;
            margin-left: 6px;
          }
        }
      }

      .password_line {
        display: flex;
        flex-direction: column;
        padding-top: 35px;

        .password_title {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 16px;
        }

        .six-input-box {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-top: 30px;
        }

        .input {
          display: flex;
          width: 65px;
          height: 68px;
          background: #3f4141;
          font-size: 24px;
          line-height: 24px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          text-align: center;
          outline: none;
          border: none;
          // border-bottom: solid 3px rgba(255, 255, 255, 0.15);
          // margin-right: 16px;
          caret-color: #a5a5a5;
          padding: 0;
        }
      }

      .forget_line {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-top: 15px;

        span {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ff8686;
          line-height: 12px;
          cursor: pointer;
        }
      }
    }

    .btn_box {
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      height: 70px;
      background: #1e2020;
      box-shadow: 0px -1px 0px 0px #333333;
      border-radius: 0px 0px 5px 5px;

      button {
        background: none;
        border: none;
        cursor: pointer;
      }

      button:nth-child(1) {
        width: 74px;
        height: 40px;
        background: #1e2020;
        border-radius: 4px;
        border: 1px solid #666666;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 14px;
      }

      button:nth-child(2) {
        width: 102px;
        height: 40px;
        background: #00ffb1;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1e2020;
        line-height: 14px;
        margin: 0 30px 0 15px;
      }
    }
  }

  /deep/.el-dialog__wrapper {
    background: rgba(0, 0, 0, 0.5);
  }

  // -出售弹窗
  .sell_dialog {
    /deep/.el-dialog {
      max-width: 560px;
      height: 480px;
      background: #1e2020;
      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
      border-radius: 5px;

      .el-dialog__header {
        display: none;
      }

      .el-dialog__body {
        margin: 0;
        padding: 0;

        .dialog_title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: 20px 20px 0 30px;

          .left_box {
            display: flex;
            align-items: center;
            transform: translateY(7px);

            .icon_left {
              width: 20px;
              height: 20px;
            }

            span {
              font-size: 18px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 18px;
            }
          }

          .right_icon {
            width: 15px;
            height: 15px;
            cursor: pointer;
          }
        }

        .dialog_center {
          width: 100%;
          margin-top: 47px;
          padding: 0 30px;

          .wd_input {
            margin-top: 40px;

            .input_box {
              position: relative;
              display: flex;
              flex-direction: column;

              .price_font {
                position: absolute;
                left: 0;
                bottom: 22px;
                font-size: 22px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #00ffb0;
                line-height: 22px;
              }

              span {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
                line-height: 14px;
              }

              input {
                width: 100%;
                background: none;
                border: none;
                margin: 0;
                padding: 0;
                border-bottom: 1px solid #444444;
                font-size: 28px;
                font-family: DINAlternate-Bold, DINAlternate;
                font-weight: bold;
                color: #00ffb0;
                line-height: 28px;
                padding: 0 50px 15px 26px;
                margin-top: 15px;
              }

              // 去除number类型input默认样式
              input[type="number"] {
                -moz-appearance: textfield;
              }

              input[type="number"]::-webkit-inner-spin-button,
              input[type="number"]::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
              }

              // 修改placeholder默认样式
              input::-webkit-input-placeholder {
                color: #666666 !important;
                font-size: 14px !important;
                font-family: PingFangSC-Regular, PingFang SC !important;
                transform: translateY(-5px) !important;
              }

              input:-moz-placeholder {
                color: #666666 !important;
                font-size: 14px !important;
                font-family: PingFangSC-Regular, PingFang SC !important;
                transform: translateY(-5px) !important;
              }

              input::-moz-placeholder {
                color: #666666 !important;
                font-size: 14px !important;
                font-family: PingFangSC-Regular, PingFang SC !important;
                transform: translateY(-5px) !important;
              }

              input:-ms-input-placeholder {
                color: #666666 !important;
                font-size: 14px !important;
                font-family: PingFangSC-Regular, PingFang SC !important;
                transform: translateY(-5px) !important;
              }

              .clear {
                position: absolute;
                right: 20px;
                bottom: 20px;
                width: 14px;
                height: 14px;
                cursor: pointer;
              }
            }
          }

          .sell_box {
            display: flex;
            flex-direction: column;
            margin-top: 21px;

            span {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 14px;
            }

            ul,
            li {
              margin: 0;
              padding: 0;
              list-style: none;
            }

            ul {
              display: flex;
              width: 100%;
              height: 32px;
              margin-top: 20px;
            }

            li {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 70px;
              height: 100%;
              background: #3f4141;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 14px;
              margin-right: 16px;
              cursor: pointer;
              transition: all 0.2s ease;
            }

            li:hover {
              background: #00ffb1;
              color: #1e2020;
            }
          }

          .content_input {
            display: flex;
            flex-direction: column;
            margin-top: 30px;

            span {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 14px;
            }

            .six_input {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              margin-top: 20px;

              .password_input {
                display: flex;
                width: 42px;
                height: 48px;
                background-color: rgba(255, 255, 255, 0.15);
                font-size: 24px;
                line-height: 24px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                text-align: center;
                outline: none;
                border: none;
                // border-bottom: solid 3px rgba(255, 255, 255, 0.15);
                caret-color: #a5a5a5;
                padding: 0;
              }
            }
          }

          .bottom_btn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 70px;
            background: #1e2020;
            box-shadow: 0px -1px 0px 0px #333333;
            border-radius: 0px 0px 5px 5px;
            padding: 0 30px;

            .password_box {
              span {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 14px;
                cursor: pointer;
              }

              i {
                width: 1px;
                height: 14px;
                border: 1px solid #444444;
                margin: 0 15px;
              }
            }

            .btn_box {
              display: flex;

              .el-button {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0;
                padding: 0;
                background: none;
                border: none;
                border-radius: 4px;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                line-height: 14px;
              }

              .el-button:nth-child(1) {
                width: 74px;
                height: 40px;
                background: #1e2020;
                border: 1px solid #666666;
                color: #999999;
              }

              .el-button:nth-child(2) {
                width: 102px;
                height: 40px;
                background: #00ffb0;
                color: #1e2020;
                margin-left: 15px;
              }
            }
          }
        }
      }
    }

    /deep/.input-box {
      input {
        width: 65px;
        height: 68px;
        font-size: 24px;
      }
    }

    // 双击不选中
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
  }

  // colors
  .currentTime {
    background: #00ffb1 !important;
    color: #1e2020 !important;
  }

  .bGrey {
    background: #333333 !important;
  }
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 6px;
  border-radius: 3px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #a0a0a0;
  height: 105px;
}
</style>
